<!-- 热门线路-->
<template>
  <div id="HotLineDiv">
  <el-card id="questionForm">
    <div id="question-div"> &nbsp; &nbsp; <span>常见问题</span> </div>
    <el-col id="form-col" v-for="item in data"><div id="col-question">{{item.question}}</div>{{item.answer}}</el-col>
  </el-card>

  <el-card id="busHotForm">
    <div id="div2"> &nbsp; &nbsp; 热门线路</div>
    <br/>
    <el-row id="row" v-for="items in hotPlace" >
      <el-col id="col" :span="6" v-for="item in items">
        <div id="col-div" class="grid-content">
          {{item.startPlace}}
          <el-icon id="icon_curr" color="#409EFC"><Sort /></el-icon>
          {{item.endPlace}}
        </div>
        <div class="grid-content">￥
          <span id="span">{{item.price}}</span>
          起 &nbsp; &nbsp;&nbsp; &nbsp;
          <el-button id="bt" round @click="go(item)">GO></el-button>
        </div>
      </el-col>
    </el-row>
  </el-card>
  </div>
</template>

<script>
import {Sort} from "@element-plus/icons-vue"
import router from "../../router";
import store from "../../store";

export default {
  name: "HotLine",
  components: {
    Sort
  },
  data(){
    return {
      data:[
        {
          question:"预订车票后要如何取票呢？",
          answer:"购票成功后，会生成取票信息并发送短信给您，请您凭该取票短信和身份证原件到发车站自助取票机或服务专窗取票。"
        },{
          question:"可以由亲朋好友代取票吗？",
          answer:"可以由他人代取票，代取人需凭取票信息和乘车人身份证前往自助取票机或人工取票窗口取票。"
        },{
          question:"没带身份证/凭身份证号能取票吗?" ,
          answer:"由于各地客运站规定不同，为确保您取票顺利，建议您携带身份证。"
        }
      ],
      hotPlace:[
          [
          {startPlace:"玉林", endPlace:"灵山", price:65},
          {startPlace:"三亚", endPlace:"钦州", price:120},
          {startPlace:"浦北", endPlace:"灵山", price:50}
          ], [
          {startPlace:"玉林", endPlace:"贵港", price:30},
          {startPlace:"灵山", endPlace:"贵港", price:80},
          {startPlace:"桂林", endPlace:"贵港", price:145},
           ],[
          {startPlace:"梧州", endPlace:"贺州", price:200},
          {startPlace:"灵山", endPlace:"玉林", price:65},
          {startPlace:"北海", endPlace:"钦州", price:90},
        ],[
          {startPlace:"广州", endPlace:"东莞", price:200},
          {startPlace:"东莞", endPlace:"佛山", price:65},
          {startPlace:"佛山", endPlace:"深圳", price:120},
        ],[
          {startPlace:"北海", endPlace:"玉林", price:200},
          {startPlace:"湛江", endPlace:"佛山", price:240},
          {startPlace:"珠海", endPlace:"广州", price:100},
        ]
      ]
    }
  },
  methods:{
    go(item){
        router.push(`/bus-search-result`)
        store.state.busTicketInfo.startPlace = item.startPlace;
        store.state.busTicketInfo.endPlace = item.endPlace;
        if(new Date().getDate()<10){
          store.state.busTicketInfo.date =new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+'0'+new Date().getDate();
        }else{
          store.state.busTicketInfo.date =new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate();
        }
        console.log(store.state.busTicketInfo.date);
    }
  }

}
</script>

<style scoped>
#HotLineDiv{
  display: flex;
  margin-left: 50px;
  min-width: 1370px;
  height: 570px;
}
#busHotForm{
  margin-left: 10px;
  float: right;
  width: 960px;
  height: 570px;
  /*border: Solid chocolate;*/
}
#div2{
  text-align: left;
  font-family: "仓耳渔阳体 W04", serif;
  font-size: 30px;
  background: #d3dce6;
  height: 50px;
}
#row{
  padding-bottom: 0;
  margin-bottom: 0;
  height: 100px;
}
#col{
  text-align: center;
  margin-left: 70px;
  height: 70px;
  border: 1px solid #e7e7e7;
  border-radius: 5px;
  border-left-style: groove;
}
#span{
  font-size: 25px;
  color: red;
}
#col-div{
  font-size: 25px;
  font-family: Arial, "Lucida Grande", Verdana, "Microsoft YaHei", hei,serif;
}
#bt{
  color: red;
  width: 50px;
  height: 20px;
  background-color: #FFEAE8;
  float: right;
  position: relative;
  top: 10px;
  right: 40px;
}
#questionForm{
  /*padding-left: 70px;*/
  margin-left: 70px;
  float: left;
  width: 300px;
  height: 570px;
}
#question-div{
  text-align: left;
  font-size: 28px;
  background: #d3dce6;
  height: 40px;
}
#col-question{
  text-align: left;
  font-size: 20px;
  height: 55px;
  /*line-height: 50px;*/
  /*border: 1px solid red;*/
}
#form-col{
  text-align: left;
  font-size: 14px;
  margin-bottom: 50px;
  height: 100px;
}


.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

#icon_curr {
  transform: rotate(270deg);
  position: relative;
  top: 4px;
}

</style>